// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

import React from 'react';
import SvgIcon from '../../../shared/svg-icon';

export default [
  {
    id: 'default',
    label: 'Default',
    element: (
      <div className="demo-only" style={{ height: '640px' }}>
        <section
          aria-hidden="false"
          role="dialog"
          className="slds-action-overflow_touch"
        >
          <div className="slds-action-overflow_touch__container">
            <div className="slds-action-overflow_touch__content">
              <div className="slds-action-overflow_touch__body">
                <ul
                  role="menu"
                  className="slds-list_vertical slds-has-block-links_space slds-has-dividers_bottom"
                >
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="Post">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-share-post slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="share_post"
                          />
                        </span>
                        <span>Post</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="New Task">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-new-task slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="new_task"
                          />
                        </span>
                        <span>New Task</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="New Contact">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-new-contact slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="new_contact"
                          />
                        </span>
                        <span>New Contact</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="New Opportunity">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-new-opportunity slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="new_opportunity"
                          />
                        </span>
                        <span>New Opportunity</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="Convert">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-lead-convert slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="lead_convert"
                          />
                        </span>
                        <span>Convert</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="Edit">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-edit slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="edit"
                          />
                        </span>
                        <span>Edit</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="Post">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-share-post slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="share_post"
                          />
                        </span>
                        <span>Post</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="New Task">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-new-task slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="new_task"
                          />
                        </span>
                        <span>New Task</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="New Contact">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-new-contact slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="new_contact"
                          />
                        </span>
                        <span>New Contact</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="New Opportunity">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-new-opportunity slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="new_opportunity"
                          />
                        </span>
                        <span>New Opportunity</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="Convert">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-lead-convert slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="lead_convert"
                          />
                        </span>
                        <span>Convert</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="Edit">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-edit slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="edit"
                          />
                        </span>
                        <span>Edit</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="Post">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-share-post slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="share_post"
                          />
                        </span>
                        <span>Post</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="New Task">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-new-task slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="new_task"
                          />
                        </span>
                        <span>New Task</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="New Contact">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-new-contact slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="new_contact"
                          />
                        </span>
                        <span>New Contact</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="New Opportunity">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-new-opportunity slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="new_opportunity"
                          />
                        </span>
                        <span>New Opportunity</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="Convert">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-lead-convert slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="lead_convert"
                          />
                        </span>
                        <span>Convert</span>
                      </p>
                    </a>
                  </li>
                  <li className="slds-item">
                    <a role="menuitem" href="#" onClick={e => e.preventDefault()}>
                      <p className="slds-truncate" title="Edit">
                        <span className="slds-icon_container slds-icon_container_circle slds-icon-action-edit slds-m-right_medium">
                          <SvgIcon
                            aria-hidden="true"
                            className="slds-icon slds-icon_small"
                            sprite="action"
                            symbol="edit"
                          />
                        </span>
                        <span>Edit</span>
                      </p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <footer className="slds-action-overflow_touch__footer slds-text-align_center">
              <button className="slds-button slds-button_neutral">Cancel</button>
            </footer>
          </div>
        </section>
        <div className="slds-backdrop slds-backdrop_open" role="presentation" />
      </div>
    )
  }
];
